<template>
    <div class="content">
            <ul>
                <li>
                    <div class="item-label">
                        <label for="">收货人：</label>
                    </div>
                    <div class="item-inner">
                        <div class="item-inner-content">
                            <input type="text" name="" id="" placeholder="请输入收货人姓名" maxlength="30" v-model.trim="formData.receiver">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-label">
                        <label for="">联系电话：</label>
                    </div>
                    <div class="item-inner">
                        <div class="item-inner-content">
                            <input type="tel" name="" id="" placeholder="请输入联系电话" maxlength="11" v-model.trim="formData.phone">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-label">
                        <label for="">所在地区：</label>
                    </div>
                    <div class="item-inner">
                        <div class="item-inner-content">
                            <span :class="{placehold:!formData.area_code}">{{formData.area_code ? formData.province+formData.city+formData.area : '请选择所在地区'}}</span>
                        </div>
                        <div class="item-after">
                            <div class="item-after-content" @click="openCityPicker">
                                请选择
                                <img src="~assets/img/icon_arr_green.png" alt="">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-label">
                        <label for="">详细地址：</label>
                    </div>
                    <div class="item-inner">
                        <div class="item-inner-content">
                            <textarea name="" id="" placeholder="请输入详细地址" maxlength="100" v-model.trim="formData.address"></textarea>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-label">
                        设置默认地址
                    </div>
                    <div class="item-inner">
                        <div class="item-inner-content">
                            
                        </div>
                        <div class="item-after">
                            <label for="default-switch">
                                <input type="checkbox" name="" id="default-switch" v-model="formData.status">
                                <span class="toggle-icon">
                                    <span></span>
                                </span>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="form-actions">
                <button type="button" @click="submitForm">保存</button>
            </div>
        <city-picker :show='showCityPicker' :init-data="cityData" @get-city-info="getCityInfo" @close="closeCityPicker"></city-picker>
    </div>
</template>
<script>
import { Toast, Indicator, MessageBox } from "mint-ui";
import CityPicker from "./city_picker";
import { apiPost } from "src/common/api.js";

export default {
  name: "address-edit",
  components: {
    CityPicker
  },
  data() {
    return {
      showCityPicker: false,
      formData: {
        province: null,
        province_code: null,
        area: null,
        area_code: null,
        city: null,
        city_code: null,
        address: null,
        status: 0,
        phone: null,
        receiver: null
      },
      cityData: null
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    openCityPicker() {
      this.cityData = {
        province: {
          code: this.formData.province_code,
          name: this.formData.province
        },
        city: {
          code: this.formData.city_code,
          name: this.formData.city
        },
        district: {
          code: this.formData.area_code,
          name: this.formData.area
        }
      };
      setTimeout(() => {
        this.showCityPicker = true;
      }, 1);
    },
    closeCityPicker() {
      this.showCityPicker = false;
    },
    getCityInfo(data) {
      this.formData.province = data.province.name;
      this.formData.province_code = data.province.code;
      this.formData.city = data.city.name;
      this.formData.city_code = data.city.code;
      this.formData.area = data.district.name;
      this.formData.area_code = data.district.code;
    },
    checkForm() {
      let telReg = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
      let phoneReg = /^1(3\d|4[056789]|5[012356789]|66|7[01345678]|8\d|9[89])\d{8}$/;
      if (this.formData.receiver == null || this.formData.receiver == "") {
        Toast({
          message: "收货人姓名不能为空",
          position: "bottom",
          duration: 1500
        });
        return false;
      } else if (
        !telReg.test(this.formData.phone) &&
        !phoneReg.test(this.formData.phone)
      ) {
        Toast({
          message: "请输入正确的手机号码",
          position: "bottom",
          duration: 1500
        });
        return false;
      } else if (this.formData.city_code == null) {
        Toast({
          message: "请选择所在地区",
          position: "bottom",
          duration: 1500
        });
        return false;
      } else if (this.formData.address == null || this.formData.address == "") {
        Toast({
          message: "详细地址不能为空",
          position: "bottom",
          duration: 1500
        });
        return false;
      } else {
        return true;
      }
    },
    submitForm() {
      if (!this.checkForm()) {
        return false;
      }
      let formData = this.formData;
      this.formData.status ? (formData.status = 1) : (formData.status = 0);
      this.formData.address_id = this.$route.params.id;
      Indicator.open({
        text: "保存中...",
        spinnerType: "fading-circle"
      });
      apiPost("update_address", formData)
        .then(res => {
          if (res.status === 0) {
            MessageBox.alert("操作成功").then(action => {
              this.$router.go(-1);
            });
          } else {
            console.log(res.msg);
          }
        })
        .then(() => {
          Indicator.close();
        });
    },
    getInfo() {
      apiPost("address", { address_id: this.$route.params.id }).then(res => {
        if (res.status === 0) {
          this.formData.province = res.data.area.split("-")[0];
          this.formData.province_code = res.data.province_code;
          this.formData.city = res.data.area.split("-")[1];
          this.formData.city_code = res.data.city_code;
          this.formData.area = res.data.area.split("-")[2];
          this.formData.area_code = res.data.area_code;
          this.formData.address = res.data.address;
          this.formData.status = res.data.status;
          this.formData.phone = res.data.phone;
          this.formData.receiver = res.data.receiver;
        } else {
          console.log(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  background: #fff;
  ul {
    padding: 0 15px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid #d2d2d2;
      .item-label {
        flex: none;
        line-height: 50px;
      }
      .item-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: auto;
        .item-inner-content {
          position: relative;
          flex: auto;
          font-size: 0;
          min-height: 50px;
          input {
            font-size: 14px;
            min-height: 50px;
          }
          textarea {
            padding: 15px 0 15px 10px;
            width: 100%;
            min-height: 50px;
            border: none;
            resize: none;
            font-size: 14px;
          }
          span{
            display: inline-block;
            font-size: 14px;
            line-height: 50px;
            text-indent: 10px;
          }
          span.placehold{
            color: #9f9f9f;
          }
        }
        .item-after {
          flex: none;
          line-height: 50px;
          font-size: 0;
          div.item-after-content {
            font-size: 14px;
            img {
              width: 14px;
              height: 14px;
              object-fit: contain;
            }
          }
          label {
            display: inline-block;
            font-size: 0;
            input[type="checkbox"] {
              display: none;
            }
            input[type="checkbox"] + span.toggle-icon {
              position: relative;
              display: inline-block;
              width: 32px;
              height: 16px;
              border: 1px solid #d2d2d2;
              border-radius: 8px;
              box-sizing: border-box;
              background: #fff;
              vertical-align: middle;
              transition: all 0.3s ease;
              span {
                position: absolute;
                top: 0px;
                left: 0;
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: #fff;
                box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
                z-index: 4;
                transition: all 0.3s ease;
              }
            }
            input[type="checkbox"] + span.toggle-icon:before {
              content: "";
              display: block;
              position: absolute;
              top: 4px;
              left: 4px;
              width: 1px;
              height: 6px;
              background: #fff;
              z-index: 1;
            }
            input[type="checkbox"] + span.toggle-icon:after {
              content: "";
              display: block;
              position: absolute;
              top: 4px;
              right: 4px;
              width: 6px;
              height: 6px;
              border: 1px solid #d2d2d2;
              border-radius: 50%;
              background: #fff;
              box-sizing: border-box;
              z-index: 1;
            }
            input[type="checkbox"]:checked + span.toggle-icon {
              border: 1px solid #23ab1b;
              background: #23ab1b;
              span {
                left: 16px;
              }
            }
          }
        }
      }
    }
  }
  .form-actions {
    padding: 10px 20px;
    button {
      width: 100%;
      height: 45px;
      font-size: 14px;
      color: #fff;
      background: #78d041;
      transition: all 0.3s ease;
    }
    button:active {
      opacity: 0.8;
    }
  }
}
</style>